<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>我的收藏-江城巴士</title>
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="favicon.ico">
    
    <link rel="stylesheet" href="css/app.css">
</head>

<body>

<header>
    <div class="title">我的收藏</div>
</header>


<section class="wrap">
    <div class="ui-list">
        <div class="bd">
            <ul>
                <li class="c1">
                    <div class="inner">
                        <div class="fromto">
                            <em>光谷广场</em>
                            <i></i>
                            <em>武昌火车站</em>
                            <b>1</b>
                        </div>
                        <div class="detail">
                            <span>东风风行cm7</span>
                            <span>即将出发：9:30</span>
                            <span>车牌：鄂TF0809</span>
                            <span>预定人数：48</span>
                        </div>
                        <div class="bus">野芷湖西路保利心语</div>
                        <div class="fav faved"></div>
                    </div>
                    <div class="check">
                        <input type="checkbox" value="iid_1" class="rdo2">
                    </div>  
                </li>
                <li class="c2">
                    <div class="inner">
                        <div class="fromto">
                            <em>光谷广场</em>
                            <i></i>
                            <em>武昌火车站</em>
                            <b>2</b>
                        </div>
                        <div class="detail">
                            <span>东风风行cm7</span>
                            <span>即将出发：9:30</span>
                            <span>车牌：鄂TF0809</span>
                            <span>预定人数：48</span>
                        </div>
                        <div class="bus">野芷湖西路保利心语</div>
                        <div class="fav faved"></div>
                    </div>
                    <div class="check">
                        <input type="checkbox" value="iid_2" class="rdo2">
                    </div>  
                </li>
                <li class="c3">
                    <div class="inner">
                        <div class="fromto">
                            <em>光谷广场</em>
                            <i></i>
                            <em>武昌火车站</em>
                            <b>3</b>
                        </div>
                        <div class="detail">
                            <span>东风风行cm7</span>
                            <span>即将出发：9:30</span>
                            <span>车牌：鄂TF0809</span>
                            <span>预定人数：48</span>
                        </div>
                        <div class="bus">野芷湖西路保利心语</div>
                        <div class="fav faved"></div>
                    </div>
                    <div class="check">
                        <input type="checkbox" value="iid_3" class="rdo2">
                    </div>  
                </li>
                <li class="c4">                
                    <div class="inner">
                        <div class="fromto">
                            <em>光谷广场</em>
                            <i></i>
                            <em>武昌火车站</em>
                            <b>4</b>
                        </div>
                        <div class="detail">
                            <span>东风风行cm7</span>
                            <span>即将出发：9:30</span>
                            <span>车牌：鄂TF0809</span>
                            <span>预定人数：48</span>
                        </div>
                        <div class="bus">野芷湖西路保利心语</div>
                        <div class="fav faved"></div>
                    </div>
                    <div class="check">
                        <input type="checkbox" value="iid_4" class="rdo2">
                    </div>  
                </li>
                <li class="c5">                
                    <div class="inner">
                        <div class="fromto">
                            <em>光谷广场</em>
                            <i></i>
                            <em>武昌火车站</em>
                            <b>5</b>
                        </div>
                        <div class="detail">
                            <span>东风风行cm7</span>
                            <span>即将出发：9:30</span>
                            <span>车牌：鄂TF0809</span>
                            <span>预定人数：48</span>
                        </div>
                        <div class="bus">野芷湖西路保利心语</div>
                        <div class="fav faved"></div>
                    </div>
                    <div class="check">
                        <input type="checkbox" value="iid_5" class="rdo2">
                    </div>  
                </li>
                <li class="c6">
                    <div class="inner">
                        <div class="fromto">
                            <em>光谷广场</em>
                            <i></i>
                            <em>武昌火车站</em>
                            <b>6</b>
                        </div>
                        <div class="detail">
                            <span>东风风行cm7</span>
                            <span>即将出发：9:30</span>
                            <span>车牌：鄂TF0809</span>
                            <span>预定人数：48</span>
                        </div>
                        <div class="bus">野芷湖西路保利心语</div>
                        <div class="fav faved"></div>
                    </div>
                    <div class="check">
                        <input type="checkbox" value="iid_6" class="rdo2">
                    </div>  
                </li>
                <li class="c7">
                    <div class="inner">
                        <div class="fromto">
                            <em>光谷广场</em>
                            <i></i>
                            <em>武昌火车站</em>
                            <b>7</b>
                        </div>
                        <div class="detail">
                            <span>东风风行cm7</span>
                            <span>即将出发：9:30</span>
                            <span>车牌：鄂TF0809</span>
                            <span>预定人数：48</span>
                        </div>
                        <div class="bus">野芷湖西路保利心语</div>
                        <div class="fav faved"></div>
                    </div>
                    <div class="check">
                        <input type="checkbox" value="iid_7" class="rdo2">
                    </div>  
                </li>
            </ul>
        </div>
        <div class="button hide">
            <button class="ubtn ubtn-blue" id="submit">取消收藏</button>
        </div>
    </div>

</section>


<script src="js/zepto.min.js"></script>
<script>
    $(function() {
        var sX = 0;    // 手指初始x坐标
        var sY = 0;    // 手指初始y坐标
        var disX = 0;  // 滑动差值
        var disY = 0;  // 滑动差值

        function showButton() {
            var length = $('.ui-list').find('.rdo2:checked').length;
            if (length === 0) {
                $('.button').addClass('hide');
            } else{
                $('.button').removeClass('hide');
            }
        }

        $('.ui-list').on('touchstart', '.check', function(e) {
            var rdo2 = $(this).find('.rdo2')[0];
            rdo2.checked = !rdo2.checked;
            showButton();
            return false;
        })
        $('.ui-list').on('touchstart', 'li', function(e){
            sX = e.changedTouches[0].pageX;
            sY = e.changedTouches[0].pageY;
        })
        $('.ui-list').on('touchmove', 'li', function(e){
            disX = e.changedTouches[0].pageX - sX;
            disY = e.changedTouches[0].pageY - sY;
            if (Math.abs(disY) <= Math.abs(disX)) {
                e.preventDefault();
            }
        })
        $('.ui-list').on('touchend', 'li', function(e){
            if (Math.abs(disY) > 60) {
                return;
            }
            if (disX > 30) { 
                $(this).removeClass('on');

            } else if (disX < -30) {
                $(this).addClass('on');

            } 
            e.preventDefault();
        })

        $('#submit').on('click', function() {
            var iids = [];
            $('.rdo2:checked').each(function() {
                iids.push(this.value);
            });
            $.ajax({
                url: '',
                data: {iid: iids.join(',')}, // eg: iid=1,2,3,4,5,6
                success: function() {}
            })
        })
    })
</script>
</body>
</html>